<template>
    <div class="rl31dg-2 iKCdHH">
        <div class="rl31dg-3 fCytZy">
            <div class="sc-1d9uflq-1 kjzgGw">
                <h1 class="jc6i63-0 sc-1d9uflq-2 cmoiYo">创建移动应用</h1>
                <p class="djs2am-0 sc-1d9uflq-3 hVuhLe">移动应用包括H5、Android、IOS、微信小程序等.</p>
                <div class="sc-494z8g-0 sc-494z8g-1 sc-4eglrx-3 fyoXML">
                    <el-alert title="此功能内测中" type="success" :closable="false" style="line-height: 30px;" show-icon></el-alert>

                    <br/>

                    <div class="sc-4eglrx-4 hNEHOb">
                        <div class="sc-494z8g-0 sc-494z8g-2 ggtYoZ">
                            <app-attr />
                        </div>
                    </div>

                    <templates-group />

                    <div class="sc-4eglrx-7 iHjquI">
                        <router-link to="/index" tag="button" class="sc-4eglrx-8 dsYJZf">取消</router-link>
                        <el-button class="aap711-0 LrZpX  dash-color-primary dash-size-large" @click="connectGit">
                            <span>下一步</span>
                        </el-button>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog
            title="选择项目图标"
            :visible.sync="projectIconsVisible"
            width="600px">

            <el-avatar :size="50" class="projectIcon" :key="index" v-for="(item , index) in 31" src="https://empty">
                <img :src="showProjectIcon(item)" @click="selectProjectIcons(item)" />
            </el-avatar>

            <span slot="footer" class="dialog-footer">
                <el-button @click="projectIconsVisible = false">取 消</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import AppAttr from './attribute'
import templatesGroup from './templatesGroup'

export default {
    data() {
        return {
            projectIconsVisible: false ,
            projectIconSelect: 'https://gw.alicdn.com/tfs/TB197e_CHrpK1RjSZTEXXcWAVXa-102-102.png' ,
            templateList:[
                {name:'基础模板' , banner:''}
            ]
        };
    },
    components: {
        AppAttr ,
        templatesGroup
    },
    methods:{
        showProjectIcon(item){
            return require('@/asserts/icons/project/' + item + '.svg');
        },
        selectProjectIcons(item){
            this.projectIconsVisible  = false ;
            this.projectIconSelect = require('@/asserts/icons/project/' + item + '.svg')
        },
        connectGit(){
            this.$message({
                message: '功能还在内测中...',
                type: 'warning'
            });
            
            /*
		    var path = '/build/app/gitlab' ;
            this.$router.push(path);
            */
        }
    }
};
</script>

<style scoped lang="scss">

@import '@/asserts/css/build/component.scss';

.iHjquI {
    margin-top: 30px;
}

.projectIcon {
    margin: 10px;
    cursor: pointer;
    background: #f7f9fa;
}

</style>


